<template>
  <div class="goodsDetails">
    <div class="van-nav-bar">
      <div class="van-nav-bar-left"
           @click="back ">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <div class="van-nav-bar-title">商品详情</div>
    </div>

    <div class="Details-banner">
      <img class="auto-img"
           :src="productDetails.large_img"
           alt="">
    </div>
    <div class="max">
      <div class="Details-box">

        <div class="Details-item">
          <div class="Details-title">
            <div class="Details-cnname">{{productDetails.name}}</div>
            <div class="Details-enname">{{productDetails.enname}}</div>
          </div>

          <div class="Details-collection">
            <div class="Details-like">
              <van-icon size="20"
                        name="like"
                        :color="collection ? '#e4393c' : '#646566'"
                        @click="collectionProduct" />
            </div>
            <div class="Details-Collect">{{collection ? '已收藏' : '收藏口味'}}</div>
            <!-- 三元运算符 ？前面是判断的条件 ？后面的第一个是为ture显示的内容 ：后面是为false的内容  -->
          </div>

        </div>

        <div class="Details-spec-max">
          <div class="Details-spec"
               v-for="(item1,index1) in productDetails.specData"
               :key="index1">

            <div class="Details-spec-box">
              {{item1.title}}
            </div>

            <div class="spec-box">
              <div class="Details-spec-item"
                   :class="{active:index2 == item1.activeIndex}"
                   v-for="(item2,index2) in item1.subSpec"
                   :key="index2"
                   @click="selectRule(item1,index2)">{{item2.title}}</div>
            </div>

          </div>

        </div>
      </div>

      <div class="Details-descr-box">
        <div class="Details-descr-title">商品描述</div>
        <div class="Details-descr"
             v-for="(item,index) in productDetails.desc"
             :key="index">{{index + 1}}、{{item}}</div>
      </div>
    </div>

    <div class="Details-stepper-box">

      <div class="Details-stepper">
        <div class="Details-choose">
          <div class="Details-choose-title">&yen;{{productDetails.price}}</div>

        </div>

        <van-stepper v-model="count"
                     theme="round"
                     button-size="22"
                     disable-input />
      </div>
      <div class="Details-choose-item">{{productDetails.name}}￥{{productDetails.price}} <span v-for="(ele,i) in SpecificationData"
              :key="i"> + {{ele}}</span></div>
      <div class="Details-stepper-item">
        <van-goods-action-button color="#FF4000"
                                 text="立即购买"
                                 @click="getBuyNow" />
        <van-goods-action-button color="#0C34BA"
                                 text="加入购物袋"
                                 @click="Addshopping" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsDetails',

  data () {
    return {
      isLogin: true,


      productDetails: {},
      // 是否收藏
      collection: false,
      count: 1,
      pid: '',
      SpecificationData: []
    }
  },

  created () {
    this.pid = this.$route.params.pid;
    this.getproductDetails(this.pid)
    this.SeeCollection();

  },

  // 请求前调用
  beforeUpdate () {
    this.getSpecificationData()
  },

  methods: {

    back () {
      //返回上一级
      this.$router.go(-1);
    },
    // 获取商品详情数据
    getproductDetails (pid) {
      this.axios({
        method: 'get',
        url: '/productDetail',
        params: {
          pid
        }
      }).then(result => {

        if (result.data.code == 600) {
          let data = result.data.result[0]

          data.desc = data.desc.split(/\n/)

          let specData = []

          let specs = ['tem', 'sugar', 'milk', 'cream'];

          specs.forEach(ele => {
            if (data[ele] == '') {
              return
            }

            let specItem = {
              title: data[`${ele}_desc`],
              activeIndex: 0,
              subSpec: []
            };

            let spec = data[ele].split(/\//)
            spec.forEach(elee => {
              specItem.subSpec.push({ title: elee })
            })
            specData.push(specItem)
          })
          data.specData = specData

          this.productDetails = data
        }
      })
    },

    //选择规格
    selectRule (item, index) {

      if (item.activeIndex == index) {
        return;
      }
      item.activeIndex = index;
      this.SpecificationData = []
      this.productDetails.specData.forEach(ele => {
        this.SpecificationData.push(ele.subSpec[ele.activeIndex].title)

      })
    },

    // 点击选择规格
    getSpecificationData () {
      this.SpecificationData = []

      this.productDetails.specData.forEach(ele => {
        this.SpecificationData.push(ele.subSpec[ele.activeIndex].title)

      })
    },

    // 收藏或者取消收藏
    collectionProduct () {
      let url = this.collection ? '/notlike' : '/like'

      this.axios({
        method: 'post',
        url,
        data: {
          pid: this.pid
        }
      }).then(result => {

        if (result.data.code == 700) {
          this.$toast.fail('请先登录在使用！')
          return
        }

        if (result.data.code == 800) {

          this.collection = true
          this.$toast.success({ message: '收藏成功', icon: 'like' });
        } else if (result.data.code == 900 && result.data.result == 1) {
          // icon: 'like-o',
          this.$toast.fail({
            message: '取消收藏', icon: 'like-o'
          });
          this.collection = false
        }
      })
    },

    // 查看是否被收藏
    SeeCollection () {
      this.axios({
        method: 'get',
        url: '/findlike',

        params: {
          pid: this.pid
        }
      }).then(result => {
        if (result.data.code == 1000) {
          if (result.data.result.length > 0) {
            this.collection = true

          }
        }
      })
    },

    // 立即购买
    getBuyNow () {
      this.axios({
        method: 'post',
        url: '/addShopcart',

        data: {
          pid: this.pid,
          count: this.count,
          rule: this.SpecificationData.join('/')
        }
      }).then(result => {



        if (result.data.code == 700) {
          this.$toast.fail('请先登录在使用！')
          return
        }

        if (result.data.code == 3000) {

          this.$toast('商品已加入购物车')

          setTimeout(() => {
            let sids = []
            sids.push(result.data.sid)

            this.$router.push({ name: 'Order', query: { sids: sids.join('-') } })

            this.shopbagCount = Number(this.shopbagCount) + this.count;
          }, 500)

        }

      })

    },

    // 添加购物车
    Addshopping () {
      this.axios({
        method: 'post',
        url: '/addShopcart',

        data: {
          pid: this.pid,
          count: this.count,
          rule: this.SpecificationData.join('/')
        }
      }).then(result => {


        if (result.data.code == 700) {
          this.$toast.fail('请先登录在使用！')
          return
        }

        if (result.data.code == 3000) {

          this.$toast.success('加入购物袋成功')

          this.shopbagCount = Number(this.shopbagCount) + this.count;
        } else {
          this.$toast('加入购物袋失败');
        }

      })
    }
  }

}
</script>

<style lang="scss" scoped>
.goodsDetails {
  background-color: #f2f2f2;
  .van-nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    background-color: #0c34ba;
    color: #fff;

    .van-nav-bar-title {
      margin-left: 115px;
      font-size: 16px;
    }
    .van-nav-bar-left {
      font-size: 16px;
    }
  }
  .Details-banner {
    padding-top: 60px;
  }
  .max {
    padding-bottom: 110px;
    .Details-box {
      background-color: #fff;
      padding: 10px;
      .Details-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .Details-cnname {
          font-size: 18px;
        }
        .Details-enname {
          font-size: 14px;
          color: #646566;
        }
        .Details-collection {
          .Details-like {
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50px;
            margin-top: -34px;
            background-color: #fff;
          }

          text-align: center;
        }
      }

      .Details-spec-max {
        margin-bottom: 20px;
      }
      .Details-spec {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .spec-box {
          display: flex;
          align-items: center;
        }
        .Details-spec-box {
          font-size: 15px;
          text-align: center;
        }
        .Details-spec-item {
          width: 70px;
          text-align: center;
          margin-right: 10px;
          padding: 6px 10px;
          background-color: #f2f2f2;
          color: #000;
          border-radius: 40px;
          &.active {
            background-color: #0c34ba;
            color: #fff;
          }
        }
      }
    }
    .Details-descr-box {
      background-color: #fff;
      margin-top: 10px;
      padding: 10px;
      margin-bottom: 20px;
      .Details-descr-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .Details-descr {
        line-height: 25px;
        font-size: 14px;
        color: #555;
      }
    }
  }

  .Details-stepper-box {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    padding: 10px;
    .Details-stepper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      .Details-choose {
        font-size: 20px;
      }
    }
    .Details-choose-item {
      font-size: 12px;
      margin-bottom: 15px;
    }
    .Details-stepper-item {
      display: flex;
    }
  }
}
</style>